<template>
  <div class="dispute-type">
    <div class="chart" id="disputeTypeBar"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'DisputeType',
  methods:{
    initChart(){
      const chart=echarts.init(document.getElementById('disputeTypeBar'))
      const option={
        tooltip: {
          trigger: 'axis',
        },
        xAxis:{
          type:'category',
          data:['民事纠纷','经济纠纷','劳动纠纷','行政纠纷','刑事纠纷','特殊领域纠纷','新型社会矛盾'],
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)'
            }
          }
        },
        grid:{
          left:0,
          top:30,
          right:10,
          bottom:0,
          containLabel:true
        },
        yAxis:{
          name:'单位：起',
          nameLocation:'end',
          nameTextStyle:{
            color:'#fff'
          },
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)'
            }
          }
        },
        series:[
          {
            data:[156,142,128,86,64,92,78],
            type:'bar',
            barWidth:15,
            showBackground:true,
            backgroundStyle:{
              color:'rgba(49,167,255,0.2)',
              borderRadius:10
            },
            itemStyle:{
              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#01D2F5',
                },
                {
                  offset: 1,
                  color: '#2393FF',
                }
              ]),
              borderRadius:10
            }
          }
        ]
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>
<style scoped lang="scss">
.dispute-type{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 100%;
  }
}
</style>
